<html>
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <style>
        .info{
            font-size:12px;
            font-weight:bold;
            color:blue;
        }

        .ok{
            font-size:12px;
            font-weight:bold;
            color:green;
        }

        .error{
            font-size:12px;
            font-weight:bold;
            color:red;
        }

        table{
            width:70%;
            border:2px solid brown;
            border-collapse:collapse;
        }
        td{
            border:1px solid brown;
            height:30px;
        }

        td:nth-child(1){
            width:150px;
            text-align:right;
            padding-right:20px;
        }
        td:nth-child(2){
            padding-left:10px;
            width:180px;
        }

        td:nth-child(2) input{
            border:1px solid black;
        }

        td:nth-child(3) {
            padding-left:15px;
        }

        #passwordimg{
            height:28px;
        }

        .hide{
            display:none;
        }

        .show{
            display:inline-block;
        }
    </style>

    <script src="jquery-1.8.0.js"> </script>
    <script>
        //用来显示提示信息
        function showInfo(labelId ,msg){
            $("#"+labelId).html(msg);
            $("#"+labelId).removeClass().addClass("info");
        }

        //用来显示错误信息
        function showError(labelId ,msg){
            $("#"+labelId).html(msg);
            $("#"+labelId).removeClass().addClass("error");
        }

        //用来显示校验通过信息
        function showOk(labelId){
            $("#"+labelId).html("√");
            $("#"+labelId).removeClass().addClass("ok");
        }


        //校验密码
        function validateUserName(item){
            var result=true;

            if(item.value==""){
                result=false;
                showError(item.id+"_msg",  "输入错误! 账号不能为空");
            }
            else{
                //定义正则表达式
                var reg=/^[a-zA-Z0-9]{6,12}$/ ;

                if(reg.test(item.value)==false){
                    result=false;
                    showError(item.id+"_msg",  "账号格式错误! ");
                }
                else{
                    showOk(item.id+"_msg");
                }
            }

            return result;
        }

        //验证密码
        function validatePassword(item){
            var result=true;

            var reg=/^[a-zA-Z0-9]{6,20}$/ ;

            if(reg.test(item.value)==false){
                result=false;
                showError(item.id+"_msg",  "密码格式不正确! ");
            }
            else{
                showOk(item.id+"_msg");
            }

            return result;
        }

        //验证确认
        function validateConfirm(item){
            var result=true;

            if(item.value==""){
                result=false;
                showError(item.id+"_msg",  "确认密码不能为空! ");
            }
            else if(item.value!=$("#password").val()){
                result=false;
                showError(item.id+"_msg",  "两次密码不一致! ");
            }
            else{
                showOk(item.id+"_msg");
            }

            return result;
        }

        //验证qq
        function validateQQ(item){
            var result=true;

            var reg=/^\d{8,16}$/ ;
            if(reg.test(item.value)==false){
                result=false;
                showError(item.id+"_msg",  "QQ格式不正确! ");
            }
            else{
                showOk(item.id+"_msg");
            }

            return result;
        }

        //验证手机
        function validatePhone(item){
            var result=true;

            var reg=/^[1]\d{10}$/ ;

            if(reg.test(item.value)==false){
                result=false;
                showError(item.id+"_msg",  "手机格式不正确! ");
            }

            else{
                showOk(item.id+"_msg");
            }

            return result;
        }

        //校验是否选择了班级
        function validateGrad(item){
            var result=true;

            if(item.value=="-1") {
                result=false;
                showError(item.id+"_msg",  "必须选择班级! ");
            }
            else{
                showOk(item.id+"_msg");
            }

            return result;
        }

        //校验是否选择了爱好
        function  validateHobby(){
            var result=true;

            if($("input[name=hobby]:checked").length==0){
                showError("hobby_msg",  "至少选择一个爱好! ");
            }
            else{
                showOk("hobby_msg");
            }

            return result;
        }

        function  validateGender(){
            var result=true;

            if($("input[name=gender]:checked").length==0){
                result=false;
                showError("gender_msg",  "没有选择性别! ");
            }
            else{
                showOk("gender_msg");
            }

            return result;
        }

        //总验证
        function validate(){
            var result=true;

            if(validateUserName( document.getElementById("userName") )==false){
                result=false;
            }

            if(validatePassword( document.getElementById("password") )==false){
                result=false;
            }

            if(validateConfirm( document.getElementById("pwd_confirm") )==false){
                result=false;
            }

            if(validateQQ( document.getElementById("qq") )==false){
                result=false;
            }

            if(validatePhone( document.getElementById("phone") )==false){
                result=false;
            }

            if(validateGrad( document.getElementById("grad") )==false){
                result=false;
            }

            if(validateHobby( document.getElementById("hobby") )==false){
                result=false;
            }

            if(validateGender( document.getElementById("gender") )==false){
                result=false;
            }


            if(result==true){
                result=confirm("验证通过! 确定要提交吗");
            }

            return result;
        }

        //验证密码强度
        function validatePasswordLevel(item){
            if(validatePassword(item)==true){
                var level=1;

                //长度够8位,且含有数字,等级+1
                var reg=/\d+/;
                if(item.value.length>=8 && reg.test(item.value)){
                    level++;
                }

                //含有大小写字母,等级+1
                var reg1=/[a-z]+/;
                var reg2=/[A-Z]+/;
                if(reg1.test(item.value)&&reg2.test(item.value)){
                    level++;
                }

                $("#passwordImg").show();
                $("#passwordImg").attr("src", "level_"+level +".png");
            }
            else{
                $("#passwordImg").hide();
            }
        }
    </script>
</head>

<body>
<form action="fromCheck.html"  onsubmit="return validate()">
    <table>
        <tr>
            <td>用户名:</td>
            <td>
                <input  id="userName"
                        onfocus="showInfo('userName_msg','英文或数字,6-12位')"
                        onblur="validateUserName(this)"

                >
            </td>
            <td><label id="userName_msg"></label></td>
        </tr>

        <tr>
            <td>密码:</td>
            <td>
                <input type="text" id="password"
                       onfocus="showInfo('password_msg','英文或数字,6-20位')"
                       onblur="validatePassword(this) "
                       onkeyup="validatePasswordLevel(this)"
                >
                <br>
                <img id="passwordImg"  class="hide">

            </td>
            <td><label id="password_msg" ></label></td>
        </tr>

        <tr>
            <td>重复密码:</td>
            <td><input  type="password"  id="pwd_confirm"
                        onfocus="showInfo('pwd_confirm_msg','要和上面的密码相同')"
                        onblur="validateConfirm(this)"

            ></td>
            <td><label id="pwd_confirm_msg"></label></td>
        </tr>

        <tr>
            <td>QQ:</td>
            <td><input  id="qq"
                        onfocus="showInfo('qq_msg','8-16 位数字')"
                        onblur="validateQQ(this)"

            ></td>
            <td><label id="qq_msg"></label></td>
        </tr>

        <tr>
            <td>手机:</td>
            <td><input  id="phone"
                        onfocus="showInfo('phone_msg','11 位数字,必须以1开头 ')"
                        onblur="validatePhone(this)"

            ></td>

            <td><label id="phone_msg"></label></td>
        </tr>

        <tr>
            <td>班级:</td>
            <td>
                <select id="grad" onchange="validateGrad(this)">
                    <option value="-1"> == 请选择 == </option>
                    <option value="one"> 一班 </option>
                    <option value="two"> 二班 </option>
                    <option value="three"> 三班 </option>
                    <option value="four"> 四班 </option>
                </select>

            </td>
            <td><label id="grad_msg"></label></td>
        </tr>

        <tr>
            <td>爱好:</td>
            <td>
                足球 <input type="checkbox" onclick="validateHobby()" name="hobby"  value="zuqiu">
                电脑 <input type="checkbox" onclick="validateHobby()"  name="hobby"   value="diannao"    >
                <br />
                游戏 <input type="checkbox" onclick="validateHobby()" name="hobby"  value="youxi"   >
                美术 <input type="checkbox" onclick="validateHobby()"  name="hobby"    value="meishu"   >  </td>
            <td><label id="hobby_msg"></label></td>
        </tr>

        <tr>
            <td>性别:</td>
            <td>男：<input type="radio" name="gender" > 女：<input type="radio" name="gender" >   </td>
            <td><label id="gender_msg"></label></td>
        </tr>

        <tr>
            <td colspan="3" class="lasttd">
                <center>
                    <input type="submit" value="提交"  >
                    &nbsp;  &nbsp;  &nbsp;  &nbsp;
                    <input type="reset" value="重置">
                </center>
            </td>
        </tr>

    </table>
</form>


</body>

</html>

